<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.4.1.min.js"></script>
        <style>
            .bg{
                width:200px;
                height: 200px;
                background:lightgreen;
            }
            .bg2{
               color:white;
            }
        </style>
        <script>
            $(function(){
                //一个一个设置样式
                // jQuery对象.css(样式名,样式值)
                // $("#d1").css("background","red");
                // $("#d1").css("color","yellow");

                // jQuery对象.css(对象格式)
                // $("#d1").css({
                //     "background":"red",
                //     "color":"hotpink"
                // });

                // jQuery对象.css(样式名,样式值).css(样式名,样式值).css(样式名,样式值)
                $("#d1").css("background","red").css("color","white");

                //jQuery对象.addClass("类名1  类名2")  添加一个或多个类样式
                $(".d2").addClass("bg bg2");


                // jQuery对象.removeClass("类名1  类名2") 删除一个或多个类样式
                $(".d2").removeClass("bg bg2");

            });

        </script>
    </head>
    <body>
        <div id="d1">sss</div>
        <div class="d2">d2</div>
    </body>
</html>